import * as echarts from '../../ec-canvas/echarts';
const http = require('../../http/index');
const APICONSTE = require('../../http/apiConst');

Page({
  data: {

    ecPie: {
      lazyLoad: true
    },

    ecLine: {
      lazyLoad: true
    },

    ecGauge: {
      lazyLoad: true
    }

  },

  onReady() {
  },

  onShow() {
    this.ecPieComponent = this.selectComponent('#mychart-dom-pie');
    this.ecLineComponent = this.selectComponent('#mychart-dom-line');
    this.ecGaugeComponent = this.selectComponent('#mychart-dom-gauge');

    this.initPie();
    this.initLine();
    this.initGauge();
  },

  initGauge: async function () {
    var data = await http({
      action: APICONSTE.GET_ENGEL_COEFFICIENT
    });
    this.ecGaugeComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);

      var option = {
        backgroundColor: "#ffffff",
        color: ["#37A2DA", "#32C5E9", "#67E0E3"],
        series: [{
          name: '业务指标',
          type: 'gauge',
          detail: {
            formatter: '{value}%'
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 30,
              shadowBlur: 0,
              color: [
                [0.2, '#37A2DA'],
                [0.3, '#32C5E9'],
                [0.4, '#67E0E3'],
                [0.5, '#91F2DE'],
                [0.6, '#FFDB5C'],
                [1, '#FF9F7F']
              ]
            }
          },
          data: [{
            value: data * 100,
            name: '恩格尔系数',
          }]

        }]
      };
      chart.setOption(option, true);
      return chart;
    });
  },

  initLine: async function () {
    var data = await http({
      action: APICONSTE.GET_ALL_MONTH_NUM
    });
    this.ecLineComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);

      var option = {
        title: {
          text: '收/支出趋势',
          left: 'center'
        },
        color: ["#37A2DA", "#FF9F7F", 'green'],
        legend: {
          data: ['支出', '收入', '净收入'],
          top: 28,
          left: 'center',
          selected: {
            '净收入': false
          }
        },
        grid: {
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(item => item.name),
        },
        yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: '{value}'
          },
          show: true
        },
        series: [{
          name: '支出',
          type: 'line',
          smooth: false,
          data: data.map(item => item.aVal)
        },{
          name: '收入',
          type: 'line',
          smooth: false,
          data: data.map(item => item.iVal)
        },{
          name: '净收入',
          type: 'line',
          smooth: false,
          data: data.map(item => {
            if (item.aVal && item.iVal) {
              return item.iVal - item.aVal;
            }
            return null;
          })
        }]
      };

      chart.setOption(option);
      return chart;
    });
  },

  /**
   * 初始化饼图
   */
  initPie: async function () {
    var data = await http({
      action: APICONSTE.GET_ALL_TYPE_COUNT
    });
    data = data.sort((a, b) => {
      return a.value - b.value;
    });
    if (!data.length) {
      data = [{name: '支出', value: 1}]
    }
    this.ecPieComponent.init((canvas, width, height) => {
      const pieChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(pieChart);
      var option = {
        title: {
          text: '支出占比',
          left: 'center'
        },
        backgroundColor: "#ffffff",
        color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
        series: [{
          label: {
            labelLine: { show: true },
            normal: {
              formatter: '{b}{d}%',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 10
              }
            }
          },
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['0%', '50%'],
          data: data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 2, 2, 0.3)'
            }
          }
        }]
      };
      pieChart.setOption(option);
      return pieChart;
    });
  }
});